import React from 'react';
import RouterView from '../router/RouterView';
import { Layout, Menu } from 'antd';
import logo from '../assets/logo.jpg'
import { useHistory } from 'react-router-dom'

import {UserOutlined,} from '@ant-design/icons';
import { Space } from 'antd';
const { Header, } = Layout;
function Index(props) {

    var { routes } = props;

    // 引入路由钩子
    var history = useHistory()
    
    var handleClick=({ item, key, keyPath, domEvent })=>{
        history.push(key);
    }
    var aaa=localStorage.getItem("userinfo")?JSON.parse(localStorage.getItem("userinfo")).name:''
    console.log(aaa);
    var logout=()=>{
        localStorage.removeItem('token')
        history.push('/login')
    }
    return (
        <div className='index'>
            <Layout>
                <Header>
                    <div className='left'>
                        <img  className='logo' src={logo} 
                        alt="" />
                        <span>三棵树的客服中心</span>
                        <Menu
                            theme="light"
                            mode="horizontal"
                            defaultSelectedKeys={['/index/home']}
                            style={{ lineHeight: '64px' }}
                            onClick={handleClick}
                        >
                            <Menu.Item key="/index/home">首页哈哈哈</Menu.Item>
                            <Menu.Item key="/index/servicecenter">服务中心哈哈</Menu.Item>
                            <Menu.Item key="/index/staffcenter">员工中心</Menu.Item>
                            <Menu.Item key="/index/customcenter">客户管理</Menu.Item>
                            <Menu.Item key="/index/systemmanage">系统管理</Menu.Item>
                        </Menu>
                    </div>
                    <div onClick={logout} style={{color:'red'}}>
                        注销登陆
                        <i className='iconfont icon-shanchu'></i>
                    </div>
                    <div className='right'>
                    <span style={{ marginRight:"50px" }} >欢迎你：{aaa}</span>
                    <UserOutlined />
                        客服工作台
                    </div>
                </Header>
                
                <Layout>
                    
                    <RouterView routes={routes}></RouterView>
                </Layout>
            </Layout>
            {/* 渲染二级路由规则 */}
        </div>
    );
}

export default Index;